<template>
	<view>
		<view class="header status_bar">
			<view class="back iconfont icon-xiangzuo1" @tap="backPage"></view>
			<view class="text">业主管理</view>
		</view>	
		
		<view class="clear_box"></view>

		<!-- <block v-for="(item, index) in info" :key="'info' + index">
			<view class="address_list">
				<view class="tick iconfont icon-xiaoqu"></view>
				<view class="text_box">
					<view class="title">{{ item.building_info }}</view>
					<view class="name_box">
						<view class="name">业主：{{item.name}}</view>
					</view>
					<view class="name_box">
						<view class="name">联系方式：</view>
						<view class="phone">{{item.phone}}</view>
					</view>
					<view class="name_box">
						<view class="name">门 楼 号 ：</view>
						<view class="phone">{{item.address}}</view>
					</view>
				</view>
				<view class="icon iconfont icon-bianji" :data-url="'/pages/personalcenter/owner/manage?id=' + item.id" @click.stop="gotopage"></view>
				<view class="icon iconfont icon-shanchu" :data-id="item.id" @tap="deleteGo"></view>
			</view>
		</block> -->
		
		<view class="comment_box">
			<view class="VerticalBox">
				<scroll-view class="VerticalNav nav" scroll-y scroll-with-animation :scroll-top="verticalNavTop"
					style="height:calc(100vh)">
					<view class="cu-item" :class="index == tabCur ? 'text-green cur' : ''" v-for="(item, index) in list"
						:key="index" @tap="TabSelect" :data-id="index" :data-goodsid="item.id">
						{{ item.name }}
					</view>
				</scroll-view>
				<scroll-view class="VerticalMain" scroll-y scroll-with-animation style="height:calc(110vh - 200upx)"
					:scroll-into-view="'main-' + mainCur" @scroll="VerticalMain">
					<view class="padding-top padding-lr">
						<view class="cu-list menu-avatar">
							<block v-for="(item, index) in info" :key="'info' + index">
								<view class="address_list">
									<view class="tick iconfont icon-xiaoqu"></view>
									<view class="text_box">
										<view class="title">{{ item.building_info }}</view>
										<view class="name_box">
											<view class="name">业主：{{item.name}}</view>
										</view>
										<view class="name_box">
											<view class="name">联系方式：</view>
											<view class="phone">{{item.phone}}</view>
										</view>
										<view class="name_box">
											<view class="name">门 楼 号 ：</view>
											<view class="phone">{{item.address}}</view>
										</view>
										<view class="name_box">
											<view class="icon02 iconfont icon-bianji" :data-url="'/pages/personalcenter/owner/manage?id=' + item.id + '&vid=' + item.village_id" @click.stop="gotopage"></view>
											<view class="icon02 iconfont icon-shanchu" :data-id="item.id" @tap="deleteGo"></view>
											<view class="icon02 iconfont icon-dianhua1" :data-phone="item.phone" @tap.stop="sceltaContatto"></view>
										</view>
										
										
									</view>
									<!-- <view class="icon iconfont icon-bianji" :data-url="'/pages/personalcenter/owner/manage?id=' + item.id" @click.stop="gotopage"></view>
									<view class="icon iconfont icon-shanchu" :data-id="item.id" @tap="deleteGo"></view> -->
								</view>
							</block>
							
						</view>
					</view>
				</scroll-view>
			</view>
		</view>

		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				info:'',
				scrrol:false,
				select: 0,
				address: [
					{
						title: '一期10栋3单元303',
						name: '程笑笑01',
						phone: '1580123559'
					},
					{
						title: '一期10栋3单元303',
						name: '程笑笑01',
						phone: '1580123559'
					},
					{
						title: '一期10栋3单元303',
						name: '程笑笑01',
						phone: '1580123559'
					},

				],
				menu: [
					// {
					// 	text: '全部'
					// },
					// {
					// 	text: '待付款'
					// },
					// {
					// 	text: '待发货'
					// },
					// {
					// 	text: '待收货'
					// },
					// {
					// 	text: '待评价'
					// }
				],
				select:0,
				buildingId:'',
				list: [],
				tabCur: 0,
				mainCur: 0,
				verticalNavTop: 0,
				load: true,
				scrrol: false,
			};
		},
		onLoad() {
			let that = this;
			that.page = 1;
			that.loadListData();
		},
		onShow() {
			let that = this;
			that.page = 1;
			that.loadData();
			
		},
		methods: {
			sceltaContatto(e) {
				//联系
				var that = this;
				let phone_ = e.currentTarget.dataset.phone;
				//console.log(e)
				uni.showActionSheet({
					itemList: ['电话'],
					success: function(res) {
						//console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
						console.log(res.tapIndex);
						uni.makePhoneCall({
							phoneNumber: phone_ //仅为示例
						});
					},
					fail: function(res) {
						console.log(res.errMsg);
					}
				});
			},
			TabSelect(e) {
				let that = this;
				that.tabCur = e.currentTarget.dataset.id;
				that.mainCur = e.currentTarget.dataset.id;
				that.verticalNavTop = (e.currentTarget.dataset.id - 1) * 50;
				that.buildingId = that.list[that.tabCur].id;
				that.page = 1;
				that.loadData();
			},
			VerticalMain(e) {
				let that = this;
				let tabHeight = 0;
				//console.log(e.detail.scrollTop)
				if (e.detail.scrollTop > 9000) {
					uni.pageScrollTo({
						scrollTop: 300,
						duration: 300
					});
				}
				if (this.load) {
					for (let i = 0; i < this.list.length; i++) {
						let view = uni.createSelectorQuery().select('#main-' + i);
						view
							.fields({
									size: true
								},
								data => {
									this.list[i].top = tabHeight;
									tabHeight = tabHeight + data.height;
									this.list[i].bottom = tabHeight;
									// console.log(this.list);
								}
							)
							.exec();
					}
					this.load = false;
				}
				let scrollTop = e.detail.scrollTop + 10;
				// let bottom_go = that.list.length - 1;
				for (let i = 0; i < this.list.length; i++) {
					if (scrollTop > this.list[i].top && scrollTop < this.list[i].bottom) {
						this.verticalNavTop = (i - 1) * 50;
			
						// if(bottom_go == that.tabCur){
						// 	this.tabCur = i + 1;
						// 	// this.mainCur = i + 1;
			
						// }else{
						// 	this.tabCur = i;
						// 	// this.mainCur = i;
						// }
						// that.classId = that.list[i].id;
			
						// console.log(scrollTop)
						return false;
					}
				}
			},
			loadData() {
			  let that = this;
			  that.Net._get('landlord',{per_page:'10',page:that.page,building_id:that.buildingId}, res => {
			    if(res.code == 200){
				  console.log(res)
			      that.info = res.data.data;
			    }
			  });
			},
			loadListData() {
			  let that = this;
			  that.Net._get('landlord_buildings',{}, res => {
			    if(res.code == 200){
			      // that.menu = res.data;
				  that.list = res.data;
						that.buildingId = res.data[0].id;
						if(that.buildingId){
							that.loadData();
						}
			    }
			  });
			},
			deleteGo(e) {
				let that = this;
				let id_ = e.currentTarget.dataset.id;
				uni.showModal({
					title: '提示',
					content: '是否删除',
					success: function (res) {
						if (res.confirm) {
							console.log('用户点击确定');
							that.Net._delete('landlord_delete', { id: id_}, res => {
							  if (res.code == 200) {
							    that.Msg.Success('删除成功', res => {
										that.page = 1;
							      that.loadData();
							    });
							  } else if (res.code != 200) {
							    console.log(res.msg)
							    that.Msg.Success(res.msg, res => {});
							  }
							});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
				
			},
			setNavMenu(e) {
				let that = this;
				let index = e.currentTarget.dataset.index;
				that.select = index;
				that.buildingId = that.menu[that.select].id;
				that.page = 1;
				that.loadData();
				
			},
			backPage() {
				uni.navigateBack({});
			},
			gotopage(e) {
				let url = e.currentTarget.dataset.url;
				uni.navigateTo({
					url: url
				});
			},
			setTickStyle(e) {
				let index = e.currentTarget.dataset.index;
				this.select = index;
			}
		},
		onPageScroll: function(Object) {
			//console.log(Object.scrollTop); //实时获取到滚动的值
			if (Object.scrollTop > 28) {
				this.scrrol = true;
				/* #ifdef APP-PLUS */
				/* #endif */
			} else if (Object.scrollTop < 28) {
				this.scrrol = false;
				/* #ifdef APP-PLUS */
				/* #endif */
			}
		},
		onPullDownRefresh() {
			//监听下拉刷新动作的执行方法，每次手动下拉刷新都会执行一次
			let that = this;
			that.info = [];
			setTimeout(function() {
				uni.stopPullDownRefresh();
				that.loadData();
			}, 500);
		},
		onReachBottom() {
		  var that = this;
		  that.page++;
		  that.Net._get('landlord',{per_page:'10',page:that.page,building_id:that.buildingId}, res => {
		    if (res.code == 200) {
		      //console.log(res)
		      if (res.data.data == '') {
		        uni.showToast({
		          title: '已经是最后一页了',
		          duration: 2000,
		          icon: 'none'
		        });
		      } else {
		        that.info = that.info.concat(res.data.data); //将数据拼接在一起
		      }
		    } else if (res.code == 0) {
		      that.Msg.Success(res.msg, res => {});
		    }
		  });
		},
	};
</script>

<style>
	.clear_box07{
		height: calc(26vw + var(--status-bar-height)) ;
	}
	page {
		padding-bottom: 0 !important;
	}

	.address_list {
		width: 100%;
		margin: 0 auto 3vw;
		border-radius: 3vw;
		background-color: #fff;
		border-bottom: 1px solid #f5f5f5;
		padding: 4%;
		display: flex;
	}

	.address_list .tick {
		width: 10vw;
		height: 10vw;
		border-radius: 50%;
		background-color: #FF9822;
		font-size: 5vw;
		color: #fff;
		text-align: left;
		text-align: center;
		line-height: 10vw;
		margin-right: 3vw;
	}

	.address_list .icon {
		width: 8vw;
		font-size: 5vw;
		color: #666;
		text-align: right;
	}

	.address_list .text_box {
		flex: 1;
	}

	.address_list .text_box .title {
		font-size: 3.8vw;
		color: #333;
		font-weight: bold;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
	}

	.address_list .text_box .name_box {
		display: flex;
		margin-top: 2vw;
		justify-content: flex-start;
	}

	.address_list .text_box .name_box .name {
		font-size: 3.2vw;
		color: #666;
	}
	
	.address_list .text_box .name_box .icon02 {
		font-size: 4vw;
		color: #333;
		margin-right: 2vw;
	}

	.address_list .text_box .name_box .phone {
		font-size: 3.2vw;
		color: #666;
		margin-left: 4vw;
	}

	.tickColor {
		color: #FF9822 !important;
	}
	
	.comment_box {
		width: 100%;
		border-radius: 3vw;
		position: relative;
		left: 0;
		top: 2vw;
		padding: 2% 0% 4% 0%;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		/* margin-bottom: 16vw; */
	}
	
	.nav {
		width: 100%;
		overflow: hidden;
		height: 9vw;
		overflow-x: auto;
		/* top: 0px; */
		z-index: 99;
		background-color: #fff;
		padding: 0vw 3vw;
	}
	
	.nav .navauto {
		width: 100%;
		display: flex;
	}
	
	.nav .navauto .menu {
		position: relative;
		background-color: #f8f8f8;
		border-radius: 2vw;
		height: 9vw;
		line-height: 9vw;
		margin-right: 2vw;
	}
	
	.nav .navauto .menu .text {
		font-size: 3.5vw;
		color: #333;
		text-align: center;
		padding: 0vw 3vw;
	}
	
	.menucolor {
		color: #fff !important;
		background-color: #ff7f22 !important;
		border-radius: 2vw !important;
		padding: 0vw 3vw !important;
	}
	
	.comment_box .man_box {
		width: 92%;
		margin: 4vw auto 3vw;
	}
	.comment_box .man_box .zuob {
		display: flex;
		width: 100%;
		justify-content: space-between;
	}
	.comment_box .man_box .zuob .portrait {
		width: 10vw;
		height: 10vw;
		border-radius: 10vw;
	}
	.comment_box .man_box .zuob .portrait image {
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}
	.comment_box .man_box .xin_box {
		display: flex;
	}
	.comment_box .man_box .xin_box .name {
		color: #222222;
		font-size: 4vw;
		padding: 3vw 0vw 0vw 2vw;
	}
	.comment_box .time {
		color: #999999;
		font-size: 3.5vw;
		margin-top: 3vw;
	}
	.comment_box .man_box .text_box {
		font-size: 3.5vw;
		color: #333333;
		margin: 2vw 0vw;
	}
	.comment_box .man_box .goods_img {
		width: 100%;
		background-color: #fff;
		padding: 0px 10px 5px 0px;
		border-radius: 0 0 0 6px;
		display: flex;
		flex-direction: row;
		justify-content: left;
		flex-wrap: wrap;
	}
	.comment_box .man_box .goods_img::after {
		flex: auto;
		content: '';
	}
	
	.comment_box .man_box .goods_img image {
		width: 30%;
		height: 110px;
		margin-right: 2.5%;
		margin-bottom: 2vw;
		flex-basis: auto;
	}
	
	.VerticalNav.nav {
		width: 200upx;
		white-space: initial;
	}
	
	.VerticalNav.nav .cu-item {
		width: 100%;
		text-align: center;
		background-color: #fff;
		margin: 0;
		border: none;
		height: auto !important;
		line-height: 5vw;
		position: relative;
		color: #999;
		margin: 1vw 0;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 3vw 0;
	}
	
	.VerticalNav.nav .cu-item.cur {
		background-color: #f8f8f8;
		color: #ff7f22;
	}
	
	.VerticalNav.nav .cu-item.cur::after {
		content: '';
		width: 8upx;
		height: 30upx;
		border-radius: 10upx 0 0 10upx;
		position: absolute;
		background-color: currentColor;
		top: 0;
		right: 0upx;
		bottom: 0;
		margin: auto;
		color: #ff7f22;
	}
	
	.VerticalBox {
		display: flex;
		width: 100%;
	}
	
	.VerticalMain {
		background-color: #f8f8f8;
		flex: 1;
	}
	
	.padding-lr{
		padding-top: 0 !important;
	}
	

</style>